<template>
  <div class="el-body">
    <el-card>
      <el-table

        v-loading="loading"
        :data="tableData"
        :cell-style="rowStyle"
        :header-cell-style="rowStyle"
        style="width: 100%"
      >
        <el-table-column
          prop="user_name"
          label="负责人"
          min-width="180">
        </el-table-column>
        <el-table-column :label="item" min-width='100' :key="item" v-for="(item,index) in dataHeader">
          <template slot-scope='scope'>
            <span>{{scope.row.data[index]}}</span>
          </template>
        </el-table-column>

      </el-table>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props:["query",'dataHeader'],
  components: {},
  data() {
    return {
      TableHeight:'',
      params:{},
      loading: true,
      total: 400,
      formInline: {},
      tableData: [],
      pageSize:10,
      page:1,
      exportLoading:false
    }
  },
  watch:{
    // pageSize(){
    //   this.init()
    // },
    // page(){
    //   this.init()
    // },
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize=val
    },
    handleCurrentChange(val) {
      this.page=val
    },
    rowStyle(){
      return "text-align:center";
    },
    init() {
      let month_start
      let month_end
      if(this.query.date){
        month_start=this.query.date[0]
        month_end=this.query.date[1]
      }
      let url='/reports/wo_receipt_detail'
      this.loading = true
      this.$http.get(url,{
        params:{limit:this.pageSize,page:this.page,...this.query,month_start:month_start,month_end:month_end}
      }).then(res => {
        this.loading = false;
        if (res.data.code === 0) {
          this.tableData = res.data.data
          this.total=res.data.count
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
  },
  // mounted() {
  //   this.init()
  // },
  created() {
    //动态计算表格高度
    let windowHeight = document.documentElement.clientHeight || document.bodyclientHeight;
    this.TableHeight = windowHeight - 250;//数值"140"根据需要调整
  }
}
</script>
<style scoped lang="scss">
@import "src/styles/conversion.scss";
.el-card {
  height: 100%;
}
.el-row ::v-deep  .el-input__inner {
  //min-width: 200px !important;
}

.el-body {
  box-sizing: border-box;
  padding: px2vh(20) px2vw(20);
  //min-height:100%;
  position: relative;

}

.block {
  margin-top: px2vh(20);
  background-color: #fff;

}
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active{
  border-radius: 50%;
}
::v-deep.el-pagination.is-background .el-pager li{
  background: #fff;
}
::v-deep.el-pagination.is-background .btn-prev:disabled{
  background: #fff;
}
::v-deep.el-pagination.is-background .btn-next{
  background: #fff;
}
</style>

